<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<jsp:include page="global.jsp"></jsp:include>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>人员管理</title>
<style type="text/css">
.ctl{
	text-decoration: none;
	color: blue;
	margin: auto 7px;
}
.ctl:HOVER{
	text-decoration: underline;
}
.center{
	text-align: center;
}
</style>
</head>
<body>
		<table width="100%" height="100%">
			<tr>
				<td width="100px;" align="right">姓名：</td>
				<td>
					<input class="easyui-textbox" value="${currentUser.name }" readonly="readonly" style="width: 150px;" />
				</td>
			</tr>
			<tr>
				<td width="100px;" align="right">性别：</td>
				<td>
					<input class="easyui-textbox" value="${currentUser.gender == 'M'?'男':'女' }" readonly="readonly" style="width: 150px;" />
				</td>
			</tr>
			<tr>
				<td width="100px;" align="right">用户名：</td>
				<td>
					<input class="easyui-textbox" value="${currentUser.username }" readonly="readonly" style="width: 150px;" />
				</td>
			</tr>
			<tr>
				<td width="100px;" align="right">密码：</td>
				<td>
					<input class="easyui-textbox" value="${currentUser.password }" type="password" readonly="readonly" style="width: 150px;" />
					<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" onclick="clearForm('pwdForm','pwdItem');pwdItem()">修改密码</a>
				</td>
			</tr>
			<tr>
				<td width="100px;" align="right">所属部门：</td>
				<td>

					<input class="easyui-textbox" value="${currentUser.department.name }" readonly="readonly" style="width: 150px;" />

				</td>
			</tr>
			<tr>
				<td width="100px;" align="right">岗位：</td>
				<td>

					<input class="easyui-textbox" value="${currentUser.position.name }" readonly="readonly" style="width: 150px;" />

				</td>
			</tr>
			<tr>
				<td width="100px;" align="right">技术职位：</td>
				<td>
					
					<input class="easyui-textbox" value="${currentUser.technicalTitle.name }" readonly="readonly" style="width: 150px;" />

				</td>
			</tr>
			<tr>
				<td width="100px;" align="right">办公电话：</td>
				<td>
					<input class="easyui-textbox" value="${currentUser.officeTel }" readonly="readonly" style="width: 150px;" />
				</td>
			</tr>
			<tr>
				<td width="100px;" align="right">移动电话：</td>
				<td>
					<input class="easyui-textbox" value="${currentUser.personalTel }" readonly="readonly" style="width: 150px;" />
				</td>
			</tr>
			<tr>
				<td align="right">备注：</td>
				<td colspan="3">
					<input class="easyui-textbox" value="${currentUser.remark }" readonly="readonly"  style="width: 420px; height: 80px;" data-options="multiline:true" readonly="readonly" />
				</td>
			</tr>
		</table>

		<div>
		<a style="margin-left:106px;" href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-edit" onclick="editItem()">修改信息</a>
		</div>

	
	<div id="pwdItem" class="easyui-window" title="修改密码" data-options="modal:true,closed:true,iconCls:'icon-search'" style="width:350px; height:250px;padding:5px;">
		<div class="easyui-layout" data-options="fit:true">
			<div data-options="region:'center'" style="padding:10px;">
				<form id="pwdForm" method="post" action="changePwd" style = "width:100%; height: 100%">
					<input type="hidden" id="pwdId" name = "id">
	
					<table width="100%" height="100%">
						<tr>
							<td width="100px;" align="right">输入原密码：</td>
							<td>
								<input class="easyui-textbox" id="oldPwd"  type="password" data-options="required:true" style="width: 150px;" />
							</td>
						</tr>
						<tr>
							<td width="100px;" align="right">输入新密码：</td>
							<td>
								<input class="easyui-textbox" id="newPwd"  type="password" data-options="required:true" style="width: 150px;" />
							</td>
						</tr>
						<tr>
							<td width="100px;" align="right">确认新密码：</td>
							<td>
								<input class="easyui-textbox" id="confirmNewPwd" name="password" type="password" data-options="required:true" style="width: 150px;" />
							</td>
						</tr>
					</table>
				</form>
			</div>
			<div data-options="region:'south',border:false" style="text-align:right;padding:5px 0 0;">
				<a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)" onclick="$('#pwdForm').submit()" style="width:80px">确 定</a>
				<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="javascript:$('#pwdItem').window('close')" style="width:80px">关 闭</a>
			</div>
		</div>
	</div>
	
	<div id="editItem" class="easyui-window" title="修改个人信息" data-options="modal:true,closed:true,iconCls:'icon-search'" style="width:600px; height:330px;padding:5px;">
		<div class="easyui-layout" data-options="fit:true">
			<div data-options="region:'center'" style="padding:10px;">
				<form id="editForm" method="post" action="editMyProfile" style = "width:100%; height: 100%">
					<input type="hidden" id="editid" name = "id">
					<input type="hidden" id="editPassword" name="password">
					<table width="100%" height="100%">
						<tr>
							<td width="100px;" align="right">姓名：</td>
							<td>
								<input class="easyui-textbox" name="name" id="editName" data-options="required:true" style="width: 150px;" readonly="readonly"/>
							</td>
							<td width="100px;" align="right">性别：</td>
							<td>
								<select name="gender" class="easyui-combobox"  id="editGender" data-options="required:true, editable: false" style="width: 150px;" disabled="disabled" >
									<option value = "F">女</option>
									<option value = "M">男</option>
								</select>
							</td>
						</tr>
						<tr>
							<td width="100px;" align="right">用户名：</td>
							<td>
								<input class="easyui-textbox" name="username" id="editUsername" readonly="readonly" data-options="required:true" style="width: 150px;"/>
							</td>
						</tr>
						<tr>
							<td width="100px;" align="right">所属部门：</td>
							<td>
								<select data-options="editable: false" name="department.id" class="easyui-combobox" id="editDepartmentId" style="width: 150px;" disabled="disabled" >
									<c:forEach var="item" items="${departments }" >
										<option value = "${item.id }">${item.name }</option>
									</c:forEach>
								</select>
							</td>
							<td width="100px;" align="right">岗位：</td>
							<td>
								<select data-options="editable: false" name="position.id" class="easyui-combobox" id="editPositionId" style="width: 150px;" disabled="disabled" >
									<c:forEach var="item" items="${positions }" >
										<option value = "${item.id }">${item.name }</option>
									</c:forEach>
								</select>
							</td>
						</tr>
						<tr>
							<td width="100px;" align="right">技术职位：</td>
							<td>
								<select data-options="editable: false" name="technicalTitle.id" class="easyui-combobox" id="editTechnicalTitleId" style="width: 150px;" disabled="disabled" >
									<c:forEach var="item" items="${technicalTitles }" >
										<option value = "${item.id }">${item.name }</option>
									</c:forEach>
								</select>
							</td>
							<td width="100px;" align="right">办公电话：</td>
							<td>
								<input class="easyui-textbox" name="officeTel" id="editOfficeTel" style="width: 150px;" />
							</td>
						</tr>
						<tr>
							<td width="100px;" align="right">移动电话：</td>
							<td>
								<input class="easyui-textbox" name="personalTel" id="editPersonalTel" style="width: 150px;"/>
							</td>
						</tr>
						<tr>
							<td align="right">备注：</td>
							<td colspan="3">
								<input class="easyui-textbox" data-options="multiline:true" style="width: 420px; height: 80px;" name="remark" id="editRemark">
							</td>
						</tr>
					</table>
				</form>
			</div>
			<div data-options="region:'south',border:false" style="text-align:right;padding:5px 0 0;">
				<a class="easyui-linkbutton" data-options="iconCls:'icon-ok'" href="javascript:void(0)" onclick="$('#editForm').submit()" style="width:80px">确 定</a>
				<a class="easyui-linkbutton" data-options="iconCls:'icon-cancel'" href="javascript:void(0)" onclick="javascript:$('#editItem').window('close')" style="width:80px">关 闭</a>
			</div>
		</div>
	</div>
	
	<script type="text/javascript">

		function editItem(){
			$("#editid").val('${currentUser.id}');
			$("#editName").textbox("setValue", '${currentUser.name}');
			$("#editPersonalTel").textbox("setValue", '${currentUser.personalTel}');
			$("#editDepartmentId").combobox("setValue", '${currentUser.department.id }');
			$("#editGender").combobox("setValue", '${currentUser.gender}');
			$("#editOfficeTel").textbox("setValue", '${currentUser.officeTel }');
			$("#editRemark").textbox("setValue", '${currentUser.remark }');
			$("#editPositionId").combobox("setValue", '${currentUser.position.id }');
			$("#editTechnicalTitleId").combobox("setValue", '${currentUser.technicalTitle.id }');
			$("#editUsername").textbox("setValue", '${currentUser.username }');
			$("#editPassword").val('${currentUser.password}');
			
			$('#editItem').window('open');
		}
		
		function pwdItem(){
			$("#pwdId").val('${currentUser.id}');
			$('#pwdItem').window('open');
		}
		function delItem(id){
			$.messager.confirm("删除确认", "您确定要删除所选的人员吗？", function(r){
				if(r){
					data = "id=" + id;
					$.ajax({
					  type: "GET",
					  url: "delPeople",
					  data: data,
					  success:function(data){
						  	var val = $.parseJSON(data);
							if(val.success){
								$('#dg').datagrid('reload');
								bottomRight('提示', '操作成功！');
							}else{
								$.messager.alert("提示", val.msg, "error");
							}
					  }
					});
				}
			});
		}
		$(function(){
			$("#pwdForm").form({
				onSubmit: function(){
					var confirmNewPwd = $("#confirmNewPwd").textbox("getValue").trim();
					var	newPwd = $("#newPwd").textbox("getValue").trim();
					var oldPwd = $("#oldPwd").textbox("getValue").trim();
					
					var checkNum = /^.*\d+.*$/;
					var checkWork = /^.*[A-Za-z]+.*$/;
					if(!checkWork.test(newPwd) || !checkNum.test(newPwd)){
						$.messager.alert("提示", "密码必须是包含字母和数字!");
						return false;
					}
					if(newPwd.length < 8){
						$.messager.alert("提示", "密码最少8个字符！");
						return false;
					}
					if(oldPwd!='${currentUser.password }'){
						$.messager.alert("提示", "原密码输入有误！");
						return false;
						}
					if(newPwd!=confirmNewPwd){
						$.messager.alert("提示", "两次新密码输入不一致！");
						return false;
						}
					return true;
			    },
				success:function(data){
					var val = $.parseJSON(data);
					if(val.success){
						bottomRight('提示', '操作成功！');
						$('#pwdItem').window('close');
						location.reload();
					}else{
						$.messager.alert("提示", val.msg, "error");
					}
				}
			});
			$("#editForm").form({
				onSubmit: function(){
					var isValid = $(this).form('validate');
					return isValid;	// 返回false将停止form提交 
			    },
				success:function(data){
					var val = $.parseJSON(data);
					if(val.success){
						bottomRight('提示', '操作成功！');
						$('#editItem').window('close');
						location.reload();
					}else{
						$.messager.alert("提示", val.msg, "error");
					}
				}
			});
		});
	</script>
</body>
</html>